<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .aa{
            border: 1px solid;
            margin: 10px 0;
            font-family: '楷体';
            width: 600px;
            box-sizing: border-box;
            padding: 5px;
            overflow: hidden;
        }

        input{
            border: none;
            outline: none;
            cursor: pointer;
        }
        .aa input:hover{
            border: 1px solid blue;
        }
        .cd{
            border: 1px solid;
            width: 600px;
        }
        table{
            border: 1px solid ;
            width: 600px;
            height: auto;
            text-align: center;
        }
        th{
            background-color: aqua;
            color: white;
        }
        .gg{
            text-align: center;
            font-weight: 500;
            width: 600px;
            line-height: 50px;
            background-color: aquamarine;
            font-family: '楷体';
            font-weight: 600;
            color: yellow;
        }
        .suan{
            width: 600px;
            height: 100px;
            border: 1px solid;
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="aa">
            编号：<input type="text" v-model="bh">
            品牌名称: <input type="text" v-model="mc">
            <br>
            产品图片地址：<input type="text" v-model="imgUrl">
            价格：<input type="text" v-model="jg">
            <button @click="jia">添加</button>
        </div>
        <div class="cd">
            <table>
                <tr>
                    <th>
                        全选： 
                        <input type="checkbox" @change="xuan" :checked="pan">
                    </th>

                    <th>产品图片</th>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,i) in book">
                    <td>
                        <input type="checkbox" v-model="checks" :value="item">
                    </td>
                    <td>
                        <img :src="item.imgUrl" width="100px">
                    </td>
                    <td>{{item.bh}}</td>
                    <td>{{item.mc}}</td>
                    <td>{{item.jg}}</td>
                    <td>
                        <button @click="item.sl--" :disabled="item.sl==1">-</button>
                        <b>{{item.sl}}</b>
                        <button @click="item.sl++">+</button>
                    </td>
                    <td>
                        <button @click="shan(i)">删除</button>
                    </td>
                </tr>                                
            </table>
            <div class="gg" v-show="!this.book.length">
                没有更多数据了
            </div>
        </div>
        <div class="suan">
            <h1>总价：{{tato}}</h1>
        </div>
    </div>
    <script src="http://unpkg.zhimg.com/vue@2"></script>
    <script>
    const vm = new Vue({
    el: "#root",
        data: {
            bh:'',
            mc:'',
            imgUrl:'',
            jg:'', 
            checks:[],
            pan:false,     
            book:[{
                id:'1',
                bh:'1',
                mc:'苹果',
                imgUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F09%2F20210609081952_51ef5.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674790922&t=3957a2685aac62412f7dbb18bd8b275d',
                sl:'1',
                jg:'1',
            }]
          
        },
        methods:{                                   
            jia(){
                if(!this.bh || !this.mc || !this.jg){
                    return
                }
                let ig = {
                    id:Math.random().toString(32).substring(2),
                    bh:this.bh,
                    mc:this.mc,
                    imgUrl:this.imgUrl?this.imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202105%2F11%2F20210511193549_08e64.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1675144762&t=f88732854d3c7532d0b61972a5c28597",
                    sl:1,
                    jg:this.jg,
                }
                this.book.push(ig)
                },
           shan(i){
                this.book.splice(i,1)
                console.log(i)
           },
           xuan(e){
                let aa =e.target.checked
                if(aa){
                    this.checks=this.book
                }else{
                    this.checks=[]
                }
           }
        },
        watch: {
            checks(newdata){
                if(newdata.length===this.book.length){
                    this.pan=true
                }else{
                    this.pan=false
                }
            }
        },
        computed: {
            tato(){
                return (this.checks.reduce(function(total,item){
                    return total+= item.jg*item.sl
                },0)).toFixed(2)
            }
        }
    })

    </script>
</body>
</html>